<template>
  <div class="home  d-flex flex-column my-container">
    <div class="col d-flex flex-column shadow p-3 rounded-lg">
      <div class="" v-if="permersion.search">

        <el-form :inline="true">
          <el-form-item>

            <el-button type="success" icon="el-icon-refresh" @click="refresh">刷新</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="col d-flex over-auto">
        <common-table show-check-box :columns="columns" :list="list">
        </common-table>
      </div>
      <pagination class="pagination" :total="count" :page.sync="pageIndex" :limit.sync="pageSize"
        @pagination="pagination" />
    </div>

    <el-dialog v-draggable class="dialog-container" title="编辑" :visible.sync="dialogVisible" width="50vw">
      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="使用人:" prop="name">
          <el-input v-model="ruleForm.user"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" type="primary" icon="el-icon-check">保存</el-button>
        <el-button @click="dialogVisible = false" icon="el-icon-close">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { queryConfigurableDevice } from "@/api/showManage/index"
import CommonTable from "@/components/newSystem/newTable/CommonTable.vue"

export default {
  components: {
    CommonTable
  },
  data () {
    return {
      pageData: {
        total: 0,
        pageIndex: 1,
        pageSize: 20
      },
      count: 0,
      pageIndex: 1,
      pageSize: 20,
      permersion: {
        add: true,
        del: true,
        update: true,
        search: true
      },
      columns: [
        {
          title: "使用人",
          prop: "user",
          align: "center"
        },
        {
          title: "使用编码",
          prop: "code",
          align: "center"
        },
        {
          title: "创建人",
          prop: "createByName",
          align: "center"
        },
        {
          title: "创建时间",
          prop: "createTime",
          align: "center"
        },
        {
          title: "更新人",
          prop: "updateByName",
          align: "center"
        },
        {
          title: "更新时间",
          prop: "updateTime",
          align: "center"
        },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            return h("div", [h("el-button", {
              props: {
                type: "success",
                size: "mini"
              },
              on: {
                click: () => {
                  this.handleUpdata(params.row)
                }
              }
            }, "编辑"),
            h("el-button", {
              props: {
                type: "primary",
                size: "mini"
              },
              on: {
                click: () => {
                  this.handleDetail(params)
                }
              }
            }, "配置"),
            h("el-button", {
              props: {
                type: "danger",
                size: "mini"
              },
              on: {
                click: () => {
                  this.handleDelete(params)
                }
              }
            }, "删除")])
          }
        }
      ],
      list: [

        {
          user: "王某某",
          code: "Test0001",
          createTime: "2023"

        }


      ],
      page: {
        pageSize: 10,
        pageIndex: 1
      },
      ruleForm: {},
      total: 0,
      dialogVisible: false
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {
    // this.getTableList()
  },
  // 存放方法事件 - 会在数据变化时被调用
  methods: {
    pagination (pageItem) {
      // pageItem.page, pageItem.limit
      this.pageData.pageIndex = pageItem.page
      this.pageData.pageSize = pageItem.limit
    },
    handleDetail (row) {
      this.$router.push({
        path: "/setView/setDetail"
        // query: { ...row }
      })
    },
    handleUpdata (row) {
      console.log(row)
      this.ruleForm = row
      this.dialogVisible = true
    },
    handleDelete (row) {

    },
    async getTableList () {
      const { status, success, object, message } = await queryConfigurableDevice({ ...this.page })
      if (status == 200) {
        this.list = object.data
        this.total = object.count
      } else {

      }
    },
    refresh () {
      // this.getTableList()
    }
  }
}
</script>
<style scoped lang="scss">
.pagination {
  display: flex;
  justify-content: flex-end;
}


::v-deep .el-dialog {
  border-radius: 8px;

  .el-dialog__footer {
    text-align: center !important;
  }
}

::v-deep .el-dialog__header {
  border-radius: 8px 8px 0 0;
  background-color: #e6e6e6;
}

.ml-3 {
  margin-left: 12px;
}


.my_span {
  font-size: 16px;
}

.my_table {
  margin-top: 16px;
}

.dialog-foote {
  text-align: center;
}
</style>
